<!-- Created by henian.xu on 2018/11/19. -->

<template>
    <Page class="container">
        <GoodsDetail :data="goodsData"/>
        <div class="row">
            <div class="col-5">
                <Panel
                    class="nma-a"
                    label="商品推荐"
                    no-body>
                    <!-- 热门商品 -->
                </Panel>
                <GoodsItem
                    class="ma-t"
                    v-for="(item) in recommendGoodsList"
                    :data="item"
                    :key="item.id"/>
            </div>
            <div class="col-19">
                <Panel class="nma-a">
                    <div
                        class="body npa-t"
                        slot="body">
                        <Tabs>
                            <TabPanel label="商品详情">
                                <table class="prop">
                                    <tbody>
                                        <tr
                                            v-for="(props,index) in propList"
                                            :key="index">
                                            <template v-for="(prop) in props">
                                                <th :key="`th${prop.pid}`">{{ prop.pn }}:</th>
                                                <td :key="`td${prop.pid}`">{{ prop.vStr }}</td>
                                            </template>

                                        </tr>
                                    </tbody>
                                </table>
                                <div class="goods-detail-content">
                                    <img
                                        v-for="(item) in goodsData.goodsDetailImageList"
                                        :key="item"
                                        :src="item || $defaultImg"
                                        width="100%">
                                </div>
                            </TabPanel>
                            <TabPanel label="售后服务">adf11</TabPanel>
                        </Tabs>
                    </div>
                </Panel>
            </div>
        </div>
    </Page>
</template>

<script>
export default {
    name: 'Details',
    data() {
        return {
            goodsData: {},
            recommendGoodsList: [],
        };
    },
    head() {
        return {
            title: '商品详情',
        };
    },
    computed: {
        goodsId() {
            return +this.$route.params.goodsId || 0;
        },
        propList() {
            if (!this.goodsData.propConfigs) return [];
            const list = [...this.goodsData.propConfigs];
            const res = [];
            while (list.length) {
                res.push(
                    list.splice(0, 3).map(item => {
                        return {
                            ...item,
                            vStr: item.v.map(v => v.vnAlias || v.vn).join(','),
                        };
                    }),
                );
            }
            return res;
        },
    },
    methods: {
        getGoodsDetail({ id = this.goodsId } = {}) {
            this.$axios.get('/rpc/buyer/gd/goods/goodsDetail', { id }).then(json => {
                const res = json.data.data;
                this.goodsData = res.goods;
                console.log(res);
            });
        },
        /**
         * 商品推荐 （商品列表取随机）
         */
        getGoodsRecommend() {
            this.$axios
                .get('/rpc/buyer/gd/goods/goodsList', {
                    orderByKey: 'random', //排序key  insertTime默认排序; random随机
                    orderByType: 'asc', //排序类型 asc升序 desc降序
                    currentPage: 1,
                    pageSize: 10, //页面大小
                })
                .then(json => {
                    const res = json.data;
                    this.recommendGoodsList = res.data;
                });
        },
    },
    mounted() {
        console.log(this.goodsId);
        this.getGoodsDetail();
        this.getGoodsRecommend();
        // console.log(this.$router.options.routes);
    },
};
</script>

<style lang="scss">
@import '~/assets/style/_index.scss';
table.prop {
    width: 100%;
    border-bottom: 1px solid $color-border;
    padding: $padding 0;
    tr {
        > th,
        > td {
            padding: $padding-small;
            text-align: left;
            font-weight: normal;
        }
        > th {
            width: 6em;
            color: $gray6;
        }
    }
}
.goods-detail-content {
    padding: $padding-big;
}
</style>
